<template>
	<el-breadcrumb class="breadcrumb-container" separator=">">
		<el-breadcrumb-item v-for="item in list" :key="item.path" style="width:auto;">
			{{item.meta.title}}
		</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script>
	export default {
		name: "VabBreadcrumb",
		data() {
			return {
				list: this.getBreadcrumb(),
			};
		},
		watch: {
			$route() {
				this.list = this.getBreadcrumb();
			},
		},
		methods: {
			getBreadcrumb() {
				var list = this.$route.matched.filter((item) => item.name && item.meta.title);
				var r = [];
				for (var i = 0; i < list.length; i++) {
					var item = list[i];
					if (i > 0 && item.parent != null && item.parent.name != list[i - 1].name) { //它父级不是前一个匹配的,就新增进去
						r.push(item.parent);
					}
					r.push(item);
				}
				return r;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/variables.scss";

	.breadcrumb-container {
		height: $base-nav-bar-height;
		font-size: $base-font-size-default;
		line-height: $base-nav-bar-height;

		::v-deep {
			.el-breadcrumb__item {
				.el-breadcrumb__inner {
					a {
						display: flex;
						float: left;
						font-weight: normal;
						color: #515a6e;

						i {
							margin-right: 3px;
						}
					}
				}

				&:last-child {
					.el-breadcrumb__inner {
						a {
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
